<!--复选框-->
<template>
  <div class="example">
    <div class="example-left">
      <zz-tree
        class="move-tree"
        :treeData="treeData"
        :options="options"
        @node-click="nodeClick"
        @node-arrow="nodeArrow"></zz-tree>
    </div>
    <div class="example-right tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用树组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) options详细参数</th>
        </tr>
        <tr>
          <td><pre>{{optionsEx}}</pre></td>
        </tr>
        <tr>
          <th>2) treeData详细数据</th>
        </tr>
        <tr>
          <td><pre>{{treeDataEx}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        options: {
          halfCheckedStatus: true,
          showCheckbox: true,
          multiple: true
        },
        treeData: [
          {
            label: '一级',
            checked: false,
            checkedBox: false,
            children: [
              {
                label: '二级-1',
                checked: false,
                checkedBox: false,
                children: [
                  {
                    label: '三级-1',
                    checked: false,
                    checkedBox: false,
                    children: [
                      {
                        label: '四级-1',
                        checked: false,
                        checkedBox: false
                      }
                    ]
                  },
                  {
                    label: '三级-2',
                    checked: false,
                    checkedBox: false
                  }
                ]
              },
              {
                label: '二级-2',
                checkedBox: false,
                checked: false
              }
            ]
          }
        ],
        treeDataEx: `
          treeData: [
          {
            label: '一级',
            open: false,  是否展开 默认关闭
            checked: false, 复选框是否选中 默认没有选中
            closeLeaf: true, 手动不显示三角形 需要的时候加入
            showSelect: true, 是否显示操作栏
            select: {1: 1, 2: 2}, 是否显示操作栏
            children: []
          }
        ]
        `,
        explameCall: `<zz-check
          treeData="树的数据"  数组
          :options="{}"  设置参数
          @node-click="nodeClick" 点击label事件
          @node-arrow="nodeArrow" 点击箭头事件
          ></zz-check>`,

        optionsEx: `
        options: {
          labelKey: 'label',  自定义需要显示的标签
          halfCheckedStatus: true,  父级是否显示半框状态 默认true
          showCheckbox: false, 是否显示复选框 默认false
          multiple: false,  复选框是否多选 默认false
          lazy: false, 是否异步加载 默认false
          load: loadChild 异步加载的函数
        }
        `,

        explameMethods:
          `handleChange (state) {
            this.state = state
            console.log(this.state)
          },
          handleChangeData (data) {
            let {state, value} = data
            console.log(state, value)
          }`
      }
    },
    methods: {
      nodeClick (state) {
        console.log(state)
      },
      nodeArrow (data) {
        console.log(data)
      },
      async loadChild (node) {
        let data = await new Promise((resolve) => {
          let data = {}
          this.$axios({
            method: 'post',
            url: 'url',
            data: this.$qs.stringify(data)
          }).then(res => {
            if (res.data.errorMsg) {
              this.$message.error(res.data.errorMsg)
            } else {
              const arr = res.data.list.map((x) => {
                return {
                  document_id: x.document_id,
                  label: x.name,
                  open: false,
                  classify_id: x.classify_id
                }
              })
              resolve(arr)
            }
          })
        })
        let tem = this.getParentNode(node, this.EPCProjectData)
        this.$set(tem, 'children', data)
        Promise.resolve(data)
      },
      getParentNode (node, treeData) {
        let tem
        let postions = node.key.split('-')
        for (let [index, item] of postions.entries()) {
          switch (index) {
            case 0:
              break
            case 1:
              tem = treeData[item]
              break
            default:
              tem = tem.children[item]
          }
        }
        return tem
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 18%;
    }
    .example-right{
      float: right;
      width: 78%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
